<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="{{url_for('static',filename='js/echarts.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='js/jquery.min.js')}}"></script>
    <script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
    <link rel="stylesheet" href="{{url_for('static',filename='css/bootstrap.min.css')}}">
    <title>支撑线</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">盯盘宝后台管理系统</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li ><a href="{{ url_for('start_web') }}">首页</a></li>
            <li ><a href="{{ url_for('permission_manage') }}">权限配置</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    管理员{{ session['admin'] if session['admin'] else "未登录" }}
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="{{ url_for("login_out") }}">退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
<div id="add-block" align="center">
<div style="width:20%;">
 <div class="input-group">
     <input type="text" class="form-control" id="stock-input" />
     <span class="input-group-addon"><a href="#" onclick="addStock()"><i class="glyphicon glyphicon-plus"> <span>添加或重新生成</span></i></a></span>
 </div>
</div>
</div>
    <div class="input-group col-xs-12">
        <p>股票:</p>
    <select id = "stock-code" class="form-control" style="margin:0px 20px 0px 0px;width:auto;">

    </select>
    </div>
    <div class="input-group col-xs-12">
        <p>分钟:</p>
    <select id="interval" class="form-control" style="margin:0px 0px 0px 20px;width:auto;">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="30">30</option>
    <option value="60">60</option>
    <option value="240">240</option>
    </select>
    </div>
<div class="input-group col-xs-12">
        <p>周期数:</p>
            <select id="points-num" class="form-control" style="margin:0px 0px 0px 20px;width:auto;">
    <option value="60">60</option>
    <option value="100">100</option>
    <option value="200">200</option>
    <option value="300">300</option>
    <option value="500">500</option>
    </select>
    </div>
<div id="k-line" style="height: 1000px;width: 2000px;"></div>
<script type="text/javascript">
$.getJSON("/static/json/support_line_stocks.json?{{ version }}",function (result) {
    if ($.type(result)=="string"){
        result = JSON.parse(result);
    }
    var stocks = result.stock_code;
    var htmlStr = "";
    for (var i=0;i<stocks.length;i++){
        htmlStr += "<option value='"+stocks[i]+"'>"+stocks[i]+"</option>";
    }
    $("#stock-code").html(htmlStr);
    loadData();
});
function addStock() {
    var stock = $("#stock-input").val();
    if (stock == ''){
        window.alert("股票为空，请填写后添加");
        return;
    }
    if (stock.indexOf("SH")!=0 & stock.indexOf("SZ")!=0){
        window.alert("股票代码以SH或SZ开头");
        return;
    }
    alert("更新完成需3-5分钟");
    $.ajax({
    url: "/addStockForSupportLine",
    async: true,
    type: 'POST',
    data: JSON.stringify({'stock': stock}),
    dataType: 'json',
    success: function (result) {
        var message = result.message;
        alert(message);
        location.reload();
    }
});
}
var data0 = null;
var upColor = '#ec0000';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';
var kLineChart = echarts.init(document.getElementById('k-line'));
function splitData(rawData) {
    var categoryData = [];
    var values = [];
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i])
    }
    return {
        categoryData: categoryData,
        values: values
    };
}

// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
function loadData(){
    $.getJSON("/static/json/"+$("#stock-code").val()+"_"+
        $("#interval").val() + "_" + $("#points-num").val()+
        "_min_k_line.json?{{ version }}",function (result) {
    var obj = result;
    data0 = splitData(obj.k_line_list);
    option = {
    title: {
        text: '支撑线(最后两个周期不参与画线)',
        left: 0
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    grid: {
        left: '10%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        type: 'category',
        data: data0.categoryData,
        scale: true,
        boundaryGap : false,
        axisLine: {onZero: false},
        splitLine: {show: false},
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax'
    },
    yAxis: {
        scale: true,
        splitArea: {
            show: true
        }
    },
    dataZoom: [
        {
            type: 'inside',
            start: 50,
            end: 100
        },
        {
            show: true,
            type: 'slider',
            y: '90%',
            start: 50,
            end: 100
        }
    ],
    series: [
        {
            name: 'K线',
            type: 'candlestick',
            data: data0.values,
            itemStyle: {
                normal: {
                    color: upColor,
                    color0: downColor,
                    borderColor: upBorderColor,
                    borderColor0: downBorderColor
                }
            }
        },
        {
            name: '支撑线',
            type: 'line',
            data: obj.support_line_list,
            smooth: true,
            lineStyle: {
                normal: {opacity: 0.5}
            },markPoint: {
                data: obj.mark_point_coord_list
            }
        }
    ]
};
    kLineChart.setOption(option);
});

}

$("#stock-code").change(function () {
    loadData();
});
$("#interval").change(function () {
    loadData();
});
$("#points-num").change(function () {
    loadData();
});
loadData();

</script>
</body>
</html>